<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style>
        div {
            width: 210px;
            margin: 0 auto;
            height: 210px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="canvas"></canvas>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext("2d");
    canvas.width = 210;
    canvas.height = 210;
    var wid = 210;
    var hei = 210;
    var r = 105;
    context.translate(105, 105)
    active()

    function active() {
        context.clearRect(-105, -105, 210, 210);
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        drow();
        drowS();
        minute(m)
        hour(h, m)
        second(s)
        yuandian();
        context.restore();
    }

    setInterval(function () {
        active()
    }, 1000)

    drow();

    function drow() {

        context.save();
        context.beginPath();
        context.lineWidth = 6;
        context.arc(0, 0, 100, 0, 2 * Math.PI);
        context.stroke();

        var number = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        context.font = '18px Arial';
        context.textAlign = "center";
        context.textBaseline = "middle";

        number.forEach(function (number, i) {

            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (100 - 25);
            var y = Math.sin(rad) * (100 - 25);
            context.fillText(number, x, y);
        })


    }
function drowS(){
    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 15);
        var y = Math.sin(rad) * (r - 15);
        context.beginPath();
        if (i % 5 == 0) {
            context.arc(x, y, 2.5, 0, 2 * Math.PI, false);
            context.fillStyle = '#000';
        } else {
            context.arc(x, y, 2, 0, 2 * Math.PI, false);
            context.fillStyle = '#ccc';
        }

        // context.closePath();
        context.fill()
    }
}
    function hour(h, m) {
        context.save();
        context.beginPath();
        var rad = 2 * Math.PI / 12 * h;
        var mrad = 2 * Math.PI / 12 / 60 * m;
        context.rotate(rad + mrad);
        context.lineWidth = 6;
        context.lineCap = 'round';
        context.moveTo(0, 10);
        context.lineTo(0, -r / 2);
        context.stroke();
        context.restore();
    }

    function minute(m) {
        context.save();
        context.beginPath();
        var mrad = 2 * Math.PI / 60 * m;
        context.rotate(mrad);
        context.lineWidth = 4;
        context.lineCap = 'round';
        context.moveTo(0, 10);
        context.lineTo(0, -r + 35);
        context.stroke();
        context.restore();
    }

    function second(s) {
        context.save();
        context.beginPath();
        context.fillStyle = "#c14543";
        var rad = 2 * Math.PI / 60 * s;
        context.rotate(rad);
        context.moveTo(-2, 20);
        context.lineTo(2, 20);
        context.lineTo(1, -r + 18);
        context.lineTo(1, -r + 18);
        context.fill();
        context.restore();
    }

    function yuandian() {
        context.beginPath();
        context.fillStyle = "#fff";
        context.arc(0, 0, 3, 0, 2 * Math.PI, false);
        context.fill();

    }


</script>
</html>